<template>
	<view>
		<view class="dd">
			<!-- 未登录界面顶端部分 -->
			<view class="item1">
				<image class="tx" style="width: 130rpx;height: 130rpx;" src="../../../static/logo.png" mode=""></image>
				<view class="item2">
					<view class="item3">HI~欢迎回来</view>
					<view class="item4"><text class="itemz">登录</text></view>
				</view>
			</view>

			<!-- 第二部分 -->
			<view class="er1">
				<view class="er2">关注3</view>
				<view class="er3">|</view>
				<view class="er4">话题0</view>
			</view>
		</view>

		<!-- 第三部分 -->
		<view class="item-dj">
			<!-- 第三部分-1 -->
			<view>
				<navigator url="../..//pages/tabBar/topic/topic">
					<view class="item-left">
						<image src="../../../static/logo.png" class="menpiao" mode=""></image>
					</view>
					<view class="item-left">收藏</view>
				</navigator>
			</view>
			<!-- 第三部分-2 -->
			<view>
				<navigator url="../..//pages/tabBar/topic/topic">
					<view class="item-left">
						<image src="../../../static/logo.png" class="menpiao1" mode=""></image>
					</view>
					<view class="item-left">历史</view>
				</navigator>
			</view>
			<!-- 第三部分-3 -->
			<view>
				<navigator url="..//pages/tabBar/topic/topic">
					<view class="item-left">
						<image src="../../../static/logo.png" class="menpiao2" mode=""></image>
					</view>
					<view class="item-left">设置</view>
				</navigator>
			</view>
		</view>
		<view>
			<image src="../../../static/logo.png" style="width: 100%;height: 90rpx;" mode=""></image>
		</view>

		<!-- 第四部分-3 -->
		<view class="button">
			<image src="../../../static/logo.png" class="buttons" style="width: 100%;height: 300rpx;" mode="">
			</image>
			<view class="button">
				<text class="hh">已有</text>385893
				<text class="hh">人</text>
			</view>
			<view class="button">
				<text class="hh">在这里发布身边的新鲜事</text>
			</view>
			<view class="reg-right">
				我也要发布
			</view>
		</view>

		<!-- 第五部分 -->
		<view class="button">
			<view class="buttons">
				先逛逛<image src="../../../static/logo.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
			</view>
		</view>

		<!-- 第六部分 -->
		<view class="zh"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.dd {
		padding-bottom: 0rpx;
		background-image: url(../../../static/log.png);
		background-position: center;
		margin-top: -30rpx;
		height: 280rpx;
	}

	.tx {
		margin-top: 10rpx;
	}

	.item1 {
		display: flex;
		margin-top: 30rpx;
		margin-left: 20rpx;
	}

	.item2 {
		margin-top: 15rpx;
	}

	.item3 {
		margin-left: 20rpx;
		color: #ffffff;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.item4 {
		border-radius: 20rpx;
		color: #ffffff;
		width: 150rpx;
		height: 50rpx;
		background-color: #dd524d;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.itemz {
		color: #ffffff;
		margin-left: 45rpx;
	}

	.er1 {
		display: flex;
		margin-top: 80rpx;
		margin-left: 80rpx;
		opacity: 0.5;
	}

	.er2 {
		margin-left: 50rpx;
		color: #ffffff;
	}

	.er3 {
		margin-left: 140rpx;
		color: #ffffff;
	}

	.er4 {
		margin-left: 150rpx;
		color: #ffffff;
	}

	.smart {}

	.item-dj {
		display: flex;
		flex-direction: row;
		-webkit-flex: 1;
		flex: 1;
		border-bottom: 1rpx solid #e6e6e6;
		margin-top: -50rpx;
		margin-bottom: 5rpx;
	}

	.item-left {
		height: 10rpx;
		line-height: 71rpx;
		/* 设置行高和标签高度一致，实现垂直居中 */
		width: 50%;
		/* 水平居中 */
		text-align: center;
		margin: 90rpx;
		font-size: 20rpx;
		padding-bottom: 1rpx;
		margin-top: 20rpx;
	}

	.menpiao {
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		margin-top: 70rpx;
	}

	.menpiao1 {
		width: 45rpx;
		height: 45rpx;
		text-align: center;
		margin-top: 70rpx;
	}

	.menpiao2 {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		margin-top: 70rpx;
	}

	.buttons {
		margin-top: 0rpx;
	}

	.button {
		text-align: center;
	}

	.reg-right {
		border: 1rpx solid #dd524d;
		width: 250rpx;
		height: 65rpx;
		text-align: center;
		color: #dd524d;
		border-radius: 40rpx;
		margin-bottom: 20rpx;
		line-height: 70rpx;
		margin-top: 40rpx;
		/* 上外间距 */
		margin-left: 240rpx;
	}

	.buttonx {
		color: #999999;
	}

	.hh {
		color: #999999;
	}

	.zh {
		height: 200rpx;
	}
</style>
